<template>
	<view class="main">
		<view class="maen">
			<u-navbar title="团队中心" :autoBack="true"  :placeholder="true" leftIconSize="20" :height="40" class="titleColor"
				:bgColor="state.bgColor" :leftIconColor="state.leftIconColor">
			</u-navbar>
		</view>
		<view class="bgColor">
			<view class="tuan">
				团长账户余额
			</view>
			<view class="ge">
				{{state.ve}}
			</view>
			<view class="tiyi" @click="sheep.$router.go('/pages/user/withdrawal')">
				提现
			</view>
		</view>
		<view class="buc">
			余额明细
		</view>
		<view class="all_list" v-if="state.balanceList.length>0">
			<view class="block" v-for="(val,index) in state.balanceList" :key='index'>
				<view class="lefts">
					<view class="title">
						<text>{{val.type_text}}</text>
					</view>
					<view class="infos">
						{{setTime(val.createtime*1000)}}
					</view>
				</view>
				<view class="righten">
					<view class="jia">
						<text v-if="val.inc_dec==1">+</text>
						<text v-else>-</text>{{val.amount}}
					</view>
					<view class="jiem">
						余额{{val.after}}
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>
<script setup>
	import {ref,reactive,} from 'vue';
	import sheep from '@/sheep';
	import {onLoad} from '@dcloudio/uni-app';
	const state = reactive({
		leftIconColor:'#fff',
		bgColor:'#1BDDD0 ',
		teamShow:false,
		limit:10,
		page:1,
		balanceList:[],
		ve:0,
	});
	onLoad((options) => {
		getUser()
		getbalance()
	});
	async function getUser(){
		const {code,data} = await sheep.$api.user.userInfo({token:uni.getStorageSync('token'),})
		state.ve=data.money
	}
	// 消息记录
	async function getbalance() {
		const {code,data} = await sheep.$api.user.balance({
			token:uni.getStorageSync('token'),
			type:0,
			account:'money',
			page:state.page,
			limit:state.limit,
		})
		if (code == 1) {
		   state.balanceList=data
		}
	}
	function setTime(time){
		let data = new Date(time)
		let nian = data.getFullYear()
		let yue = (data.getMonth()+1).toString().padStart(2,'0')
		let ri = data.getDate().toString().padStart(2,'0')
		let shi = data.getHours().toString().padStart(2,'0')
		let fen = data.getMinutes().toString().padStart(2,'0')
		let miao = data.getSeconds().toString().padStart(2,'0')
		var formattedDateTime = nian + '-' + yue + '-' + ri + ' ' + shi + ':' + fen + ':' + miao;
		return formattedDateTime
	}
	// 倒计时
	function getLeft(){
		uni.navigateBack({
			delta:1,//返回层数，2则上上页
		})
	}
</script>
<style  lang="scss">
	
	page {
		height: 100%;
		width: 100%;
		background-color: #F5F5F5;
		overflow-y: auto;
		.main {
			height: 100%;
			width: 100%;
			// background-color: #F5F5F5;
			.maen{
				width: 100%;
				height: 380rpx;
				background: linear-gradient(135deg, #1BDDD0 0%, #1BDDD0 100%);
				.uni-page-head{
					background: rgba(0,0,0,0)!important;
					color: #fff!important;
					
					.titleColor{
						color:#fff;
					}
				}
				:deep(.u-navbar__content__title){
					color: #fff!important;
				}
			}
			.bgColor{
				width: calc(100% - 102rpx);
				margin: -200rpx auto;
				text-align: center;
				background: #fff;
				border-radius: 24rpx;
				padding:24rpx;
				.tuan{
					text-align: center;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
				}
				.ge{
					font-size: 64rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
					margin: 40rpx 0;
				}
				.tiyi{
					width: 400rpx;
					height: 96rpx;
					background: #1BDDD0;
					border-radius:54rpx;
					line-height: 96rpx;
					text-align: center;
					color:#fff;
					margin: 50rpx auto;
				}
			}
			.all_list {
				width:calc(100% - 102rpx);
				padding:24rpx;
				margin: 0 auto;
				background-color: #fff;
				
				border-radius: 24rpx;
				.block {
					width:100%;
					padding:24rpx 0;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					justify-content: space-between;
					border-bottom:1px solid #F7F7F7;
					.lefts{
						// text-align: right;
					}
					.righten{
						text-align: right;
						.jia{
							font-size: 28rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: #333333;
						}
						.jiem{
							font-size:24rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #666666;
							margin-top: 10rpx;
						}
					}
					.img {
						width: 100%;
						height: 332rpx;
						border-radius: 24rpx 24rpx 0 0;
						overflow: hidden;
			
						image {
							width: 100%;
							height: 332rpx;
						}
					}
			
					.title {
						display: flex;
						align-items: center;
						// margin: 20rpx 24rpx 4rpx;
						text {
							font-size: 32rpx;
							color: #333333;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
						}
					}
			
					.infos {
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #A5A5A5;
						// margin: 4rpx 24rpx 12rpx;
						margin-top: 10rpx;
					}
			
					.type {
						width: 128rpx;
						height: 42rpx;
						line-height: 42rpx;
						text-align: center;
						border-radius: 30rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
						margin-right: 8rpx;
						margin-left: 24rpx;
					}
				}
			}
			.bottoms{
				width: calc(100% - 48rpx);
				position: fixed;
				bottom:20rpx;
				left:24rpx;
				border-radius:54rpx;
				border:1px solid #333333;
				line-height: 92rpx;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #fff;
				font-size: 32rpx;
				font-weight: bold;
				image{
					width: 48rpx;
					height:48rpx;
					margin-right: 10rpx;
				}
			}
			.yu{
				width: calc(100% - 64rpx);
				margin:120rpx auto 64rpx;
				color:#fff;
				display: flex;
				justify-content: space-between;
				.yuLeft{
					.tiJiao{
						width: 150rpx;
						height:60rpx;
						line-height: 60rpx;
						color: #1BDDD0;
						text-align: center;
						background: #FFFFFF;
						border-radius:32rpx;
						margin-top: 20rpx;
					}
					.jiaGe{
						font-size: 48rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
						margin-top: 20rpx;
					}
					.title{
						font-size: 28rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
					}
					.yutle{
						display: flex;
						justify-content: center;
						align-items:center;
						color: #FFFFFF;
						font-size: 28rpx;
						image{
							width:40rpx;
							height:40rpx;
						}
					}
				}
			}
		}
		
		.butLi{
			width: calc(100% - 64rpx);
			margin:60rpx auto;
			background: #1BDDD0;
			font-size:32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 92rpx;
			text-align: center;
			border-radius: 54rpx;
		}
		.buc{
			width:calc(100% - 64rpx);
			margin: 20rpx auto;
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-top: 240rpx;
		}
		.duiHuan{
			width: calc(100% - 64rpx);
			margin:2 0rpx auto;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #666666;
			line-height: 50rpx;
		}
   }
   
</style>
